<!-- 告警统计分析 -->

<template>
  <div class="flex flex-col w-100% p-10px box-border" style="height: calc(100% - 40px)">
    <!-- top -->
    <div class="flex-1 flex mb-10px">
      <!-- card-1 -->
      <div
        class="flex-1 flex flex-col"
        style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
      >
        <div class="flex justify-between items-center h-50px pl-10px pr-20px bg-[#F8F8F8]">
          <span class="text-[#333] text-16px font-bold">告警处置情况分析</span>

          <div class="flex items-center">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker
              v-model="gjczqkfxDate"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(gjczqkfxDate)"
            />
            <el-button
              type="primary"
              class="w-80px ml-20px rounded-15px"
              :icon="Search"
              @click="loadGjczqkfxChart"
              >查询</el-button
            >
            <el-button
              class="w-80px bg-[#dceeff] rounded-15px"
              :icon="Refresh"
              @click="resetGjczqkfxChart"
              >重置</el-button
            >
          </div>
        </div>
        <div class="w-100% flex-1 flex">
          <div class="flex flex-col justify-between items-center ml-20px mt-17px mb-28px">
            <div
              class="flex justify-between items-center w-263px flex-1 mb-10px bg-[#FFEAD1] rounded-4px"
              style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
            >
              <img
                class="w-80px h-80px ml-27px"
                src="@/assets/image/notificationAnalytics/ljgj-icon.png"
                alt=""
              />
              <div class="mr-26px">
                <div>
                  <span
                    class="text-63px font-400 text-[#FC6E26]"
                    style="font-family: CenturyGothic"
                    >{{ ljgj }}</span
                  >
                  <span class="text-[#FC6E26]">次</span>
                </div>
                <div class="text-right text-24px text-[#FC6E26]">累计告警</div>
              </div>
            </div>

            <div
              class="flex justify-between items-center w-263px flex-1 mb-10px bg-[#BFE5FF] rounded-4px"
              style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
            >
              <img
                class="w-80px h-80px ml-27px"
                src="@/assets/image/notificationAnalytics/ycl-icon.png"
                alt=""
              />
              <div class="mr-26px">
                <div>
                  <span
                    class="text-63px font-400 text-[#0F86E8]"
                    style="font-family: CenturyGothic"
                    >{{ ycl }}</span
                  >
                  <span class="text-[#0F86E8]">次</span>
                </div>
                <div class="text-right text-24px text-[#0F86E8]">已处理</div>
              </div>
            </div>

            <div
              class="flex justify-between items-center w-263px flex-1 bg-[#FFCCCC] rounded-4px"
              style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
            >
              <img
                class="w-80px h-80px ml-27px"
                src="@/assets/image/notificationAnalytics/wcl-icon.png"
                alt=""
              />
              <div class="mr-26px">
                <div>
                  <span
                    class="text-63px font-400 text-[#FF6666]"
                    style="font-family: CenturyGothic"
                    >{{ wcl }}</span
                  >
                  <span class="text-[#FF6666]">次</span>
                </div>
                <div class="text-right text-24px text-[#FF6666]">未处理</div>
              </div>
            </div>
          </div>
          <div class="flex-1 flex items-center pr-10px">
            <Echarts ref="gjczqkfxChartRef" :option="gjczqkfxChartOption"></Echarts>
          </div>
        </div>
      </div>

      <!-- card-2 -->
      <div
        class="flex-1 flex flex-col ml-10px"
        style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
      >
        <div class="flex justify-between items-center h-50px pl-10px pr-20px bg-[#F8F8F8]">
          <span class="text-[#333] text-16px font-bold">告警占比情况分析</span>

          <div class="flex items-center">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker
              v-model="gjzbqkfxDate"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(gjzbqkfxDate)"
            />
            <el-button
              type="primary"
              class="w-80px ml-20px rounded-15px"
              :icon="Search"
              @click="loadGjzbqkfxChart"
              >查询</el-button
            >
            <el-button
              class="w-80px bg-[#dceeff] rounded-15px"
              :icon="Refresh"
              @click="resetGjzbqkfxChart"
              >重置</el-button
            >
          </div>
        </div>
        <div class="flex w-100% flex-1">
          <Echarts ref="gjzbqkfxoneRef" class="flex-1"></Echarts>

          <Echarts ref="gjzbqkfxtwoRef" class="flex-1"></Echarts>
        </div>
      </div>
    </div>

    <!-- bottom -->
    <div class="flex-1 flex">
      <!-- card-3 -->
      <div
        class="flex-1 flex flex-col"
        style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
      >
        <div class="flex justify-between items-center h-50px pl-10px pr-20px bg-[#F8F8F8]">
          <span class="text-[#333] text-16px font-bold">告警趋势分析</span>

          <div class="flex items-center">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker
              v-model="gjqsfxDate"
              type="month"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="gjqsfxDate = moment(gjqsfxDate).format('YYYY-MM')"
            />
            <el-button
              type="primary"
              class="w-80px ml-20px rounded-15px"
              :icon="Search"
              @click="loadGjqsfxChart"
              >查询</el-button
            >
            <el-button
              class="w-80px bg-[#dceeff] rounded-15px"
              :icon="Refresh"
              @click="resetGjqsfxChart"
              >重置</el-button
            >
          </div>
        </div>
        <div class="w-100% flex-1 flex items-center">
          <Echarts ref="gjqsfxRef"></Echarts>
        </div>
      </div>

      <!-- card-4 -->
      <div
        class="flex-1 flex flex-col ml-10px"
        style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
      >
        <div class="flex justify-between items-center h-50px pl-10px pr-20px bg-[#F8F8F8]">
          <span class="text-[#333] text-16px font-bold">告警时段分析</span>

          <div class="flex items-center">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker
              v-model="gjsdfxDate"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(gjsdfxDate)"
            />
            <el-button
              type="primary"
              class="w-80px ml-20px rounded-15px"
              :icon="Search"
              @click="loadGjsdfxChart"
              >查询</el-button
            >
            <el-button
              class="w-80px bg-[#dceeff] rounded-15px"
              :icon="Refresh"
              @click="resetGjsdfxChart"
              >重置</el-button
            >
          </div>
        </div>
        <div class="flex w-100% flex-1">
          <Echarts ref="gjsdfxRef1" class="flex-1"></Echarts>

          <Echarts ref="gjsdfxRef2" class="flex-1"></Echarts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { Search, Refresh } from '@element-plus/icons-vue'
import moment from 'moment'
import { dateChangeFormat } from '@/utils/date'

/** ------告警处置情况分析----- */
const gjczqkfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])
const gjczqkfxChartRef: any = ref(null)
const ljgj = ref(0) //累计告警
const ycl = ref(0) //已处理
const wcl = ref(0) //未处理
const gjczqkfxChartOption = {
  grid: {
    top: 60,
    left: 60,
    right: 40,
    bottom: 40,
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  title: {
    text: '告警数量/条',
    left: 'left',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  legend: {
    data: ['告警总数', '已处理', '未处理'],
    left: 'right',
  },
  // ---  提示框 ----
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  series: [
    {
      name: '告警总数',
      type: 'bar',
      barWidth: '15%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#ffcf4d',
            },
            {
              offset: 1,
              color: '#f39935',
            },
          ]),
          barBorderRadius: 7,
        },
      },
      data: [],
    },
    {
      name: '已处理',
      type: 'bar',
      barWidth: '15%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#66cccc',
            },
            {
              offset: 1,
              color: '#00cc66',
            },
          ]),
          barBorderRadius: 7,
        },
      },
      data: [],
    },
    {
      name: '未处理',
      type: 'bar',
      barWidth: '15%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#ff9999',
            },
            {
              offset: 1,
              color: '#ee3f3f',
            },
          ]),
          barBorderRadius: 7,
        },
      },
      data: [],
    },
  ],
}

onMounted(() => {
  gjczqkfxChartOption.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  gjczqkfxChartRef.value.initEchat(gjczqkfxChartOption)
})
function loadGjczqkfxChart() {
  queryBjjlCzqkTjxx({ kssj: gjczqkfxDate.value[0], jssj: gjczqkfxDate.value[1] }).then(
    (res: any) => {
      gjczqkfxChartOption.xAxis.data = []
      gjczqkfxChartOption.series[0].data = []
      gjczqkfxChartOption.series[1].data = []
      gjczqkfxChartOption.series[2].data = []

      ljgj.value = res.ljgj ? res.ljgj : 0
      ycl.value = res.ycl ? res.ycl : 0
      wcl.value = res.wcl ? res.wcl : 0

      if (res.czqkList && res.czqkList.length > 0) {
        gjczqkfxChartOption.graphic = null

        const xAxisData = res.czqkList.map((item: any) => item.gjlx)
        const gjzs = res.czqkList.map((item: any) => item.gjzs)
        const ycl = res.czqkList.map((item: any) => item.ycl)
        const wcl = res.czqkList.map((item: any) => item.wcl)

        gjczqkfxChartOption.xAxis.data = xAxisData
        gjczqkfxChartOption.series[0].data = gjzs
        gjczqkfxChartOption.series[1].data = ycl
        gjczqkfxChartOption.series[2].data = wcl
      } else {
        gjczqkfxChartOption.graphic = [
          {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              fill: '#999',
              text: '暂无数据',
              font: '14px Microsoft YaHei',
            },
          },
        ]
      }

      gjczqkfxChartRef.value.initEchat(gjczqkfxChartOption)
    }
  )
}
loadGjczqkfxChart()

const resetGjczqkfxChart = () => {
  gjczqkfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  gjczqkfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadGjczqkfxChart()
}

/** -----告警占比情况分析----- */
const gjzbqkfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

//查询
const loadGjzbqkfxChart = () => {
  loadGjzbqkfxoneChart()
  loadGjzbqkfxtwoChart()
}

//重置
const resetGjzbqkfxChart = () => {
  gjzbqkfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  gjzbqkfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadGjzbqkfxChart()
}

const gjzbqkfxoneRef: any = ref(null)
const gjzbqkfxoneChartOption = {
  title: {
    text: '',
    textStyle: {
      fontWeight: 'normal',
      rich: {
        name: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333333',
          padding: [10, 0],
        },
        val: {
          fontSize: 32,
          fontWeight: 'bold',
          color: '#333333',
        },
      },
    },
    left: 'center',
    top: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    bottom: 10,
    itemWidth: 10,
    itemHeight: 10,
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '48%'],
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
        rich: {
          a: {
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 30,
          },
          hr: {
            borderColor: '#aaa',
            width: '100%',
            borderWidth: 0.5,
            height: 0,
          },
          b: {
            fontSize: 12,
            color: '#333',
            lineHeight: 30,
          },
          c: {
            fontSize: 12,
            color: '#333',
            lineHeight: 30,
            fontWeight: 'bold',
          },
        },
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
}

onMounted(() => {
  gjzbqkfxoneChartOption.title.text = `暂无数据`
  gjzbqkfxoneRef.value.initEchat(gjzbqkfxoneChartOption)
})
function loadGjzbqkfxoneChart() {
  queryBjjlDjzbTjxx({ kssj: gjzbqkfxDate.value[0], jssj: gjzbqkfxDate.value[1] }).then((res) => {
    gjzbqkfxoneChartOption.title.text = `{name|告警总数} \n {val|0}条`
    gjzbqkfxoneChartOption.series[0].data = []

    let sumCount = 0
    const seriesData = res.map((item: any) => {
      sumCount += item.bjsl

      let color = ''
      if (item.bjMc === '一级告警') {
        color = '#F4B160'
      } else if (item.bjMc === '二级告警') {
        color = '#FEFDA3'
      } else if (item.bjMc === '三级告警') {
        color = '#47CECD'
      }

      return {
        value: item.bjsl,
        name: item.bjMc,
        itemStyle: {
          color,
        },
      }
    })

    gjzbqkfxoneChartOption.title.text = `{name|告警总数} \n {val|${sumCount}}条`
    gjzbqkfxoneChartOption.series[0].data = seriesData
    gjzbqkfxoneRef.value.initEchat(gjzbqkfxoneChartOption)
  })
}
loadGjzbqkfxoneChart()

const gjzbqkfxtwoRef: any = ref(null)
const gjzbqkfxtwoChartOption = {
  title: {
    text: `{name|告警总数} \n {val|156}条 `,
    textStyle: {
      fontWeight: 'normal',
      rich: {
        name: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333333',
          padding: [10, 0],
        },
        val: {
          fontSize: 32,
          fontWeight: 'bold',
          color: '#333333',
        },
      },
    },
    left: 'center',
    top: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    bottom: 10,
    itemWidth: 10,
    itemHeight: 10,
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '48%'],
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
        rich: {
          a: {
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 30,
          },
          hr: {
            borderColor: '#aaa',
            width: '100%',
            borderWidth: 0.5,
            height: 0,
          },
          b: {
            fontSize: 12,
            color: '#333',
            lineHeight: 30,
          },
          c: {
            fontSize: 12,
            color: '#333',
            lineHeight: 30,
            fontWeight: 'bold',
          },
        },
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
}

onMounted(() => {
  gjzbqkfxtwoChartOption.title.text = `暂无数据`
  gjzbqkfxtwoRef.value.initEchat(gjzbqkfxtwoChartOption)
})
function loadGjzbqkfxtwoChart() {
  queryBjjlLxzbTjxx({ kssj: gjzbqkfxDate.value[0], jssj: gjzbqkfxDate.value[1] }).then((res) => {
    gjzbqkfxtwoChartOption.title.text = `{name|告警总数} \n {val|0}条`
    gjzbqkfxtwoChartOption.series[0].data = []

    let sumCount = 0
    const seriesData = res.map((item: any) => {
      sumCount += item.bjsl
      return { value: item.bjsl, name: item.bjMc }
    })

    gjzbqkfxtwoChartOption.title.text = `{name|告警总数} \n {val|${sumCount}}条`
    gjzbqkfxtwoChartOption.series[0].data = seriesData

    gjzbqkfxtwoRef.value.initEchat(gjzbqkfxtwoChartOption)
  })
}
loadGjzbqkfxtwoChart()

/** -----告警趋势分析----- */
const gjqsfxDate = ref(moment().format('YYYY-MM'))
const gjqsfxRef: any = ref(null)

const color = ['#FC7C52', '#4281F2', '#897CFC', '#F4B160', '#47CECD', '#0065A8']
const hexToRgba = (hex, opacity) => {
  let rgbaColor = ''
  const reg = /^#[\da-f]{6}$/i
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
      '0x' + hex.slice(3, 5)
    )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
  }
  return rgbaColor
}
const areaStyle = (index) => {
  return {
    normal: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: hexToRgba(color[index], 0.3),
        },
        {
          offset: 1,
          color: hexToRgba(color[index], 0.1),
        },
      ]),
      shadowColor: hexToRgba(color[index], 0.1),
      shadowBlur: 10,
    },
  }
}

const gjqsfxChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  backgroundColor: '#fff',
  color: color,
  grid: {
    top: 80,
    left: 40,
    right: 40,
    bottom: 40,
  },
  legend: {
    icon: 'rect',
    itemHeight: 12,
    itemWidth: 12,
    top: 10,
    left: 10,
    textStyle: {
      fontSize: 12,
      color: '#567',
    },
  },
  xAxis: {
    data: [],
    boundaryGap: false,
  },
  yAxis: {},
  series: [],
}

onMounted(() => {
  gjqsfxChartOption.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  gjqsfxRef.value.initEchat(gjqsfxChartOption)
})

function loadGjqsfxChart() {
  queryBjlxMrTjxx({ ny: gjqsfxDate.value }).then((res: any) => {
    gjqsfxChartOption.xAxis.data = []
    gjqsfxChartOption.series = []

    const yAxisData =
      res.gjlxSlList &&
      res.gjlxSlList.map((item, index) => {
        return {
          name: item.gjlxm,
          type: 'line',
          data: item.sl,
          smooth: true,
          symbolSize: 6,
          areaStyle: areaStyle(index),
        }
      })

    if (res.sjList && yAxisData) {
      gjqsfxChartOption.graphic = null
      gjqsfxChartOption.xAxis.data = res.sjList
      gjqsfxChartOption.series = yAxisData
    } else {
      gjqsfxChartOption.graphic = [
        {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            fill: '#999',
            text: '暂无数据',
            font: '14px Microsoft YaHei',
          },
        },
      ]
    }

    gjqsfxRef.value.initEchat(gjqsfxChartOption)
  })
}
loadGjqsfxChart()

//重置
const resetGjqsfxChart = () => {
  gjqsfxDate.value = moment().format('YYYY-MM')

  loadGjqsfxChart()
}

/** -----告警时段分析----- */
const gjsdfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

onMounted(() => {
  gjsdfxLineChartOption.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  gjsdfxRef1.value.initEchat(gjsdfxLineChartOption)

  gjsdfxPieChartOption.title.text = `\n暂无数据`
  gjsdfxRef2.value.initEchat(gjsdfxPieChartOption)
})
function loadGjsdfxChart() {
  queryBjjlSdTjxx({ kssj: gjsdfxDate.value[0], jssj: gjsdfxDate.value[1] }).then((res) => {
    gjsdfxLineChartOption.xAxis.data = []
    gjsdfxLineChartOption.series[0].data = []
    const date = res.map((item: any) => item.sdfw)
    const val = res.map((item: any) => item.bjsl)
    if (date && val) {
      gjsdfxLineChartOption.graphic = null
      gjsdfxLineChartOption.xAxis.data = date
      gjsdfxLineChartOption.series[0].data = val
    } else {
      gjsdfxLineChartOption.graphic = [
        {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            fill: '#999',
            text: '暂无数据',
            font: '14px Microsoft YaHei',
          },
        },
      ]
    }
    gjsdfxRef1.value.initEchat(gjsdfxLineChartOption)

    gjsdfxPieChartOption.title.text = `{name|告警总数} \n {val|0}条`
    gjsdfxPieChartOption.series[0].data = []
    let pieSumCount = 0
    const pieData = res.map((item) => {
      pieSumCount += item.bjsl
      return {
        name: item.sdfw,
        value: item.bjsl,
      }
    })
    if (pieSumCount > 0) {
      gjsdfxPieChartOption.title.text = `{name|告警总数} \n {val|${pieSumCount}}条`
      gjsdfxPieChartOption.series[0].data = pieData
    }
    gjsdfxRef2.value.initEchat(gjsdfxPieChartOption)
  })
}
loadGjsdfxChart()

//重置
const resetGjsdfxChart = () => {
  gjsdfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  gjsdfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadGjsdfxChart()
}

const gjsdfxRef1: any = ref(null)
const gjsdfxLineChartOption = {
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  title: {
    text: '告警数量/条',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  grid: {
    top: 60,
    left: 60,
    right: 40,
    bottom: 40,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  series: [
    {
      type: 'bar',
      barWidth: 7,

      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#0099ff' },
          { offset: 1, color: '#004eff' },
        ]),
        borderRadius: 4,
      },
      data: [],
    },
  ],
}

const gjsdfxRef2: any = ref(null)
const gjsdfxPieChartOption = {
  title: {
    text: ``,
    textStyle: {
      fontWeight: 'normal',
      rich: {
        name: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333333',
          padding: [10, 0],
        },
        val: {
          fontSize: 32,
          fontWeight: 'bold',
          color: '#333333',
        },
      },
    },
    left: 'center',
    top: '35%',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    bottom: 10,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#666',
    },
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      center: ['50%', '45%'],
      label: {
        show: false,
        position: 'center',
        rich: {
          a: {
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 30,
          },
          hr: {
            borderColor: '#aaa',
            width: '100%',
            borderWidth: 0.5,
            height: 0,
          },
          b: {
            fontSize: 12,
            color: '#333',
            lineHeight: 30,
          },
          c: {
            fontSize: 12,
            color: '#333',
            lineHeight: 30,
            fontWeight: 'bold',
          },
        },
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
}
</script>

<style></style>
